<!doctype html>
<!--
Copyright (c) Acconeer AB, 2018
All rights reserved
-->
<html lang="sv">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Envelope 3D</title>

  <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="lib/aos/css/aos.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body style="overflow: hidden">
  <section id="logo">
    <div class="container-flex fixed-top navbar-data">
      <div class="container">
        <div class="row justify-content-between my-4">
          <div class="col-auto d-flex my-2" data-aos="fade-down" data-aos-delay="0">
            <a href="index.html" title="Go back" class="backarrow"></a>
            <h1 class="logo my-auto ml-3 ml-md-5">Envelope 3D Demo</h1>
          </div>
          <div class="col-auto d-flex my-2" data-aos="fade-down" data-aos-delay="100">
            <a href="#" title="Show settings" class="settingsicon" data-toggle="modal" data-target="#settings"></a>
            <a href="#" title="Show info" class="infoicon ml-3 ml-md-5" data-toggle="modal" data-target="#info"></a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="modal fade" id="settings">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Settings</h3>
          <button type="button" class="close" title="Cancel" data-dismiss="modal">
            <span>&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="settings-form">
            <div class="form-row">
              <div class="form-group col-sm-6">
                <label>Sweep start</label>
                <div class="input-group mb-3">
                  <input required type="number" name="range_start" step="0.01" min="0.06" max="1.5" class="form-control" value="0.2">
                  <div class="input-group-append">
                    <span class="input-group-text">0.06 - 1.5m</span>
                  </div>
                </div>
              </div>
              <div class="form-group col-sm-6">
                <label>Sweep length</label>
                <div class="input-group mb-3">
                  <input required type="number" name="range_end" step="0.01" min="0.06" max="0.7" class="form-control" value="0.7">
                  <div class="input-group-append">
                    <span class="input-group-text">0.06 - 0.7m</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-12">
                <label>Frequency</label>
                <div class="range-label text-center">
                  <span class="badge badge-light border"><span id="frequency-label">30</span> Hz</span>
                </div>
                <input type="range" name="frequency" min="1" max="100" value="30" class="custom-range" id="frequency">
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-12">
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" id="gain-check" data-toggle="collapse" data-target="#gain-slider">
                  <label class="custom-control-label" for="gain-check">Enable gain</label>
                </div>
                <div class="collapse" id="gain-slider">
                  <div class="range-label text-center">
                    <span class="badge badge-light border" id="gain-label">0.50</span>
                  </div>
                  <input type="range" name="gain" min="0" max="1" step="0.01" value="0.50" class="custom-range" id="gain">
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-12">
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" id="average-check" data-toggle="collapse" data-target="#average-slider">
                  <label class="custom-control-label" for="average-check">Enable running average</label>
                </div>
                <div class="collapse" id="average-slider">
                  <div class="range-label text-center">
                    <span class="badge badge-light border" id="average-label">0.50</span>
                  </div>
                  <input type="range" name="average" min="0.01" max="0.99" step="0.01" value="0.50" class="custom-range" id="average">
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-12">
                <label for="profile">Profile</label>
                <select id="profile" class="form-control" name="profile">
                  <option value="1">Profile 1</option>
                  <option selected value="2">Profile 2</option>
                  <option value="3">Profile 3</option>
                  <option value="4">Profile 4</option>
                  <option value="5">Profile 5</option>
                </select>
              </div>
            </div>
            <button type="submit" class="btn btn-primary font-weight-bold">Apply</button>
            <button onclick="window.location.reload()" class="btn btn-outline-secondary font-weight-bold">Reset to defaults</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="info">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Info</h3>
          <button type="button" class="close" title="Close" data-dismiss="modal">
            <span>&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Processed radar data. Returns a vector with the amplitudes of the reflected radar signal within a predefined distance range.</p>
          <p>Additional documentation is available on <a href="https://acconeer-python-exploration.readthedocs.io/en/latest/services/envelope.html" target="_blank">Read the Docs</a>.</p>
          <h4 class="modal-title">Controls</h4>
          <p>
            <table class="table table-borderless">
              <tbody>
                <tr>
                  <th scope="row">MOUSE LEFT CLICK & DRAG</th>
                  <td>Change camera angle</td>
                </tr>
                <tr>
                  <th scope="row">MOUSE RIGHT CLICK & DRAG</th>
                  <td>Pan around</td>
                </tr>
                <tr>
                  <th scope="row">KEYBOARD ARROWKEYS</th>
                  <td>Pan around</td>
                </tr>
                <tr>
                  <th scope="row">MOUSE SCROLL WHEEL</th>
                  <td>Zoom in and out</td>
                </tr>
              </tbody>
            </table>
          </p>
        </div>
      </div>
    </div>
  </div>

  <script src="lib/jquery/jquery-3.4.0.min.js"></script>
  <script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="lib/threejs/three.min.js"></script>
  <script src="lib/threejs/OrbitControls.js"></script>
  <script src="lib/aos/js/aos.js"></script>
  <script src="lib/eventsrc/EventSource.js"></script>
  <script src="js/main.js"></script>
  <script src="js/envelopes3D.js"></script>
</body>
</html>
